<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>地址登记</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="stylesheet" href="amazeui/css/amazeui.min.css"/>
<link rel="stylesheet" href="default/style.css"/>
<link rel="stylesheet" href="amazeui/css/amazeui.address.min.css"/>
<script src="amazeui/js/jquery.min.js"></script>
<script src="amazeui/js/amazeui.min.js"></script>
<script src="amazeui/js/iscroll.min.js"></script>
<script src="amazeui/js/address.js"></script>
</head>

<body>
<div class="container">
	<header data-am-widget="header" class="am-header am-header-default my-header">
      <!--<div class="am-header-left am-header-nav">-->
        <!--<a href="#left-link" class="">-->
          <!--<i class="am-header-icon am-icon-chevron-left"></i>-->
        <!--</a>-->
      <!--</div>-->
      <h1 class="am-header-title">
        <a href="#title-link" class="">收货地址</a>
      </h1>
      <!--<div class="am-header-right am-header-nav">-->
        <!--<a href="#right-link" class="">-->
          <!--<i class="am-header-icon  am-icon-home"></i>-->
        <!--</a>-->
      <!--</div>-->
    </header>
    <div class="cart-panel">
		<form class="am-form">
            <div class="am-form-group am-form-icon">
                <i class="am-icon-user" style="color:#329cd9"></i>
                <input id="name" type="text" class="am-form-field  my-radius" placeholder="请输入您的姓名" th:value="${user.name}">
            </div>
            <!--<div class="am-form-group am-form-icon">-->
                <!--<i class="am-icon-lock" style="color:#329cd9"></i>-->
                <!--<input type="password" class="am-form-field  my-radius" placeholder="请输入您的密码">-->
            <!--</div>-->
            <!--<div class="am-form-group am-form-icon">-->
                <!--<i class="am-icon-lock" style="color:#e9c740"></i>-->
                <!--<input type="password" class="am-form-field  my-radius" placeholder="请重复输入一次密码">-->
            <!--</div>-->
            <div class="am-form-group am-form-icon">
                <i class="am-icon-phone" style="color:#f09513"></i>
                <input id="phone" type="text" class="am-form-field  my-radius" placeholder="请输入联系电话" th:value="${user.phone}">
            </div>
            <!--<div class="am-form-group am-form-icon">-->
                <!--<i class="am-icon-map-marker" style="color:#e9c740"></i>-->
                <!--<input type="text" id="address" class="am-form-field  my-radius" placeholder="请选择地区">-->
            <!--</div>-->
            <form class="am-form am-padding-sm" id="address-form">
                <div class="" style="margin-bottom: 1.5rem;padding: 0;">
                    <input type="text" name="prov" readonly="" style="width: 32%;display: inline-block" id="prov" placeholder="省" th:value="${user.province}">
                    <input type="text" name="city" readonly="" style="width: 32%;display: inline-block" id="city" placeholder="市" th:value="${user.city}">
                    <input type="text" name="district" readonly="" style="width: 32%;display: inline-block" id="district" placeholder="区" th:value="${user.dist}">
                </div>
                <button style="background: #e0e0e0" type="button" id="address" class="am-btn am-btn-block am-margin-bottom-sm">
                    <i class="am-icon am-icon-home"></i> 选择地址
                </button>
            </form>
            <script>
                $("#address").address({
                    customOutput: true,
                    selectEnd: function(json,address) {
                        for(var key in json) {
                            console.log(key);
                            $("#"+key).val(json[key]);
                            // console.log($("#prov").attr("id"));
                            // $("#address-form").find("input[name='" + key + "']").val(json[key]);
                        }
                    }
                }).on("provTap",function(event,activeli){
                    // console.log(activeli.text());
                }).on("cityTap",function(event,activeli){
                    // console.log(activeli.text());
                })
            </script>
            <div class="am-form-group am-form-icon">
                <i class="am-icon-filter" style="color:#78c3ca"></i>
                <input id="xAddress" type="text" class="am-form-field  my-radius" placeholder="请输入详细收货地址" th:value="${user.address}">
            </div>
            <!--<div class="am-checkbox">-->
              <!--<label>-->
                <!--<input type="checkbox"> 我已阅读并同意<a href="#">《协议》</a>-->
              <!--</label>-->
            <!--</div>-->
            <p class="am-text-center" id="reg_ok"><button type="button" class="am-btn am-btn-danger am-radius am-btn-block">立即登记</button></p>
            <script>
                function isNull(str){
                    if(str==null||str==''||str==undefined){
                        return true;
                    }
                    return false;
                }
                //判断手机号
                function isPoneAvailable(phone) {
                    var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;
                    if (!myreg.test(phone)) {
                        return false;
                    } else {
                        return true;
                    }
                }

                $("#reg_ok").click(function () {
                    var name=$("#name").val();
                    var phone=$("#phone").val();
                    var prov=$("#prov").val();
                    var city=$("#city").val();
                    var district=$("#district").val();
                    var address=$("#xAddress").val();
                    if(isNull(name)){
                       alert("姓名不能为空");
                       return;
                    }
                    if(!isPoneAvailable(phone)){
                        alert("请输入正确的手机号");
                        return;
                    }
                    if(isNull(prov)){
                        alert("省份不能为空");
                        return;
                    }
                    if(isNull(city)){
                        alert("城市不能为空");
                        return;
                    }
                    if(isNull(district)){
                        alert("区不能为空");
                        return;
                    }
                    if(isNull(address)){
                        alert("地址不能为空");
                        return;
                    }
                    $.ajax({
                        type: 'POST',
                        url: '/verify/reg',
                        data: {name:name,phone:phone,prov:prov,city:city,district:district,address:address},
                        dataType:"JSON",
                        success: function (data) {
                            console.log(data);
                            if(data.code==0){
                                alert("操作成功!");
                            }else{
                                alert(data.msg);
                            }
                            return;
                        },
                        error:function () {
                            alert("服务器出错，请稍后再试");
                            return;
                        }
                    });
                });
            </script>
        </form>
    </div>

    <footer data-am-widget="footer" class="am-footer am-footer-default" data-am-footer="{  }">
        <hr data-am-widget="divider" style="" class="am-divider am-divider-default"/>
        <div class="am-footer-miscs ">
            <p>广东温氏乳业有限公司</p>

        </div>
    </footer>
    <!--底部-->
    <div data-am-widget="navbar" class="am-navbar am-cf my-nav-footer " id="">
        <ul class="am-navbar-nav am-cf am-avg-sm-4 my-footer-ul">
            <li>
                <a href="/index.html" class="">
                    <span class="am-icon-home"></span>
                    <span class="am-navbar-label">首页</span>
                </a>
            </li>
            <li>
                <a href="/shoppingcart.html" class="">
                    <span class=" am-icon-cart-plus"></span>
                    <span class="am-navbar-label">购物车</span>
                </a>
            </li>
            <li style="position:relative">
                <a href="/reg.html" class="">
                    <span class="am-icon-user"></span>
                    <span class="am-navbar-label">收货地址</span>
                </a>
            </li>
            <li style="position:relative">
                <a href="/groupbuy.html" class="">
                    <span class="am-icon-list"></span>
                    <span class="am-navbar-label">订单列表</span>
                </a>
            </li>
        </ul>
        <script>
            function showFooterNav(){
                $("#footNav").toggle();
            }
        </script>
    </div>
</div>
</body>
<script src="public.js"></script>
</html>
